import React, { Component } from 'react';
import {
  Table,
  Pagination,
  Dialog,
  Button,
  Input,
  Grid,
  DatePicker,
  Message,
} from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import ChooseHead from '../chooseHead';
import PageHead from '../../../../components/PageHead';
import './index.scss';
import { getLocalTime } from '../../../../utils/localTime';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;

@withRouter
export default class goodList extends Component {
  state = {
    page: 1,
    isLoading: true,
    filterData: {}, // 删选条件
    payList: [], // 付款列表
    purDetailList: [], // 每单详情列表
    countPage: 1, // 总页数
    perPage: 10, // 每页数据量
    filterData: {
      place: '',
      search: '',
      start_time: '',
      end_time: '',
      status: 1, // 未付款状态
    }, // 筛选条件
    Pvisible: false, // 付款弹窗
    Dvisible: false, // 详情弹窗
    payFormData: {
      price: '', // 付款金额
      remarks: '', // 备注
    },
    p_id: '', // 单子ID
    s_id: '', // 供应商ID，我也不知道为什么加上它
  };
  // 获取采购付款列表
getPayList= () => {
  service({
    method: 'get',
    url: api.PurInPayList,
    params: {
      status: this.state.filterData.status || '',
      place: this.state.filterData.place,
      search: this.state.filterData.search,
      start_time: this.state.filterData.start_time,
      end_time: this.state.filterData.end_time,
      page: this.state.page || 1,
    },
  })
    .then((res) => {

      const payList = res.data.list;
      // payList.forEach((item) => {
      //   item.add_time = getLocalTime(item.add_time);
      // });
      const countPage = res.data.count_page;
      this.setState(
        {
          payList,
          countPage,
          isLoading: false,
        }
      );
    });
}
 // 去付款
 toPay= () => {

   service({
     method: 'post',
     url: api.ToPay,
     data: {
       p_id: this.state.p_id || '',
       s_id: this.state.s_id,
       price: this.state.payFormData.price,
       remarks: this.state.payFormData.remarks,
     },
   })
     .then((res) => {
 
       if (res.data.code === 200) {
         Message.success('付款成功！');
         this.setState(
           {
             Pvisible: false,
             payFormData: {
               price: '', // 付款金额
               remarks: '', // 备注
             },
             isLoading: true,
           }, () => {
             this.getPayList();
           }
         );
       } else {
         Message.error('付款失败！');
       }
     });
 }
 
 componentDidMount() {
   this.getPayList();
 }


  handlePaginationChange = (page) => {
    this.setState(
      {
        page,
        isLoading: true,
      },
      () => {

      }
    );
  };

  handleFilterChange = (value) => {
    // let start_time = '';
    // let end_time = '';
    // if (value.time) {
    //   if (value.time[0]) {
    //     start_time = new Date(value.time[0].toLocaleString()).toLocaleDateString();
    //   }
    //   if (value.time[1]) {
    //     end_time = new Date(value.time[1].toLocaleString()).toLocaleDateString();
    //   }
    // }
    this.setState(
      {
        filterData: {
          place: value.place || '',
          search: value.search || '',
          status: 1,
          // start_time,
          // end_time,
        },
        page: 1,
        isLoading: true,
      }, () => {
        // console.log(this.state.filterData);
        this.getPayList();
      }
    );
  };

  // handleDetail = (record) => {
  //   this.setState(
  //     {
  //       p_id: record.id,
  //     }, () => {
  //       this.getSingleData();
  //     }
  //   );
  // };
  handlePay = (record) => {
    this.setState(
      {
        p_id: record.id,
        s_id: record.s_id,
        Pvisible: true,
      }
    );
  }
  handleDownload = () => {
    window.location.href = `${api.PurInPayList}?excel=1&place=${this.state.filterData.place}&start_time=${this.state.filterData.start_time}&end_time=${this.state.filterData.end_time}&search=${this.state.filterData.search}`;
  }

  onClose = () => {
    this.setState(
      {
        Pvisible: false,
        Dvisible: false,
        payFormData: {
          price: '', // 付款金额
          remarks: '', // 备注
        },
      }
    );
  }

  renderOper = (value, index, record) => {
    return (
      <div>
        {/* <a style={styles.link.detail} onClick={() => this.handleDetail(record)}>
          详情
        </a>
        <span style={styles.separator} /> */}
        <a style={styles.link.pay} onClick={() => this.handlePay(record)}>
          付款
        </a>
      </div>
    );
  };
  //  付款表单数据
  handlePayFormChange = (value) => {
    this.setState(
      {
        payFormData: {
          price: value.price,
          remarks: value.remarks,
        },
      }
    );
  }
  // 付款确认按钮
  handlePayBtnClick = () => {
    this.toPay();
  }
  render() {
    const { isLoading, payList, page, perPage, countPage, purDetailList } = this.state;

    return (
      <div style={styles.container}>
        <ChooseHead filterChange={this.handleFilterChange} />
        <PageHead title="采购付款列表" buttonText="导出Excel" onClick={this.handleDownload} />
        <IceContainer style={{paddingBottom:'0'}}>
          <Table loading={isLoading} dataSource={payList} hasBorder={false}>
            <Table.Column title="所欠供应商" dataIndex="name" align="left" />
            {/* <Table.Column title="欠款时间" dataIndex="add_time" align="left" /> */}
            <Table.Column title="欠款金额" dataIndex="total_price" align="left" />
            <Table.Column title="操作" cell={this.renderOper} align="center" />
          </Table>
        </IceContainer>
        <Pagination
          style={styles.pagination}
          current={page}
          onChange={this.handlePaginationChange}
          total={countPage * perPage}
        />
        {/* 详情弹窗 */}
        <Dialog
          id="DDialog"
          visible={this.state.Dvisible}
          footerActions={[]}
          style={{ marginTop: '25px' }}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn SubBtn">确定</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">详细信息</span></h3>
            <IceContainer className="dialogContent" style={{ width: '1200px' }}>
              <Table loading={isLoading} dataSource={purDetailList} hasBorder={false} maxBodyHeight="600">
                <Table.Column title="商品条码" dataIndex="goods_bar_code" />
                <Table.Column title="商品名称" dataIndex="goods_name" />
                <Table.Column title="型号" dataIndex="model" />
                <Table.Column title="色号/膜层" dataIndex="color_layer" />
                <Table.Column title="数量" dataIndex="stock" />
                <Table.Column title="零售价" dataIndex="retail_price" />
                <Table.Column title="进货价" dataIndex="buying_price" />
                <Table.Column title="镜片类型" dataIndex="lens_type" />
                <Table.Column title="折射率" dataIndex="refractivity" />
                <Table.Column title="屈光度" dataIndex="diopter" />
                <Table.Column title="散光度" dataIndex="astigmatism" />
                <Table.Column title="折扣" dataIndex="rebate" />
                <Table.Column title="生产批号" dataIndex="batch_number" />
                <Table.Column title="到期日期" dataIndex="due_time" />
                {/* <Table.Column title="操作" cell={this.renderOper} /> */}
              </Table>
            </IceContainer>
          </div>
        </Dialog>
        {/* 付款弹窗 */}
        <Dialog
          id="PDialog"
          visible={this.state.Pvisible}
          footerActions={[]}
          style={{ marginTop: '25px' }}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.handlePayBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={this.onClose} className="dialogButton OutBtn">取消</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">付款信息填写</span></h3>
            <IceContainer className="dialogContent" style={{ width: '800px' }}>
              <IceFormBinderWrapper value={this.state.payFormData} onChange={this.handlePayFormChange}>
                <div style={styles.col} span="8">
                  <span style={styles.SelectLabel}>付款金额</span>
                  <IceFormBinder name="price">
                    <Input size="large" placeholder="请输入付款金额" style={{ width: '400px' }} required />
                  </IceFormBinder>
                </div>
                <div span="16" style={styles.col}>
                  <span style={styles.SelectLabel}>备注</span>
                  <IceFormBinder name="remarks">
                    <Input size="large" placeholder="请输入备注" style={{ width: '400px' }} />
                  </IceFormBinder>
                </div>
                {/* <Col span="8" style={styles.col}>
                    <span style={styles.SelectLabel}>退库日期</span>
                    <IceFormBinder name="add_time">
                      <DatePicker size="large" style={styles.Select} />
                    </IceFormBinder>
                  </Col> */}

              </IceFormBinderWrapper>
            </IceContainer>
          </div>
        </Dialog>
      </div>
    );
  }
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  listTitle: {
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    width: '140px',
    height: '40px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    pay: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  row: {
    marginBottom: '20px',
  },
  col: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: '20px',
  },
  SelectLabel: {
    display: 'inline-block',
    minWidth: '60px',
    paddingRight: '10px',
  },
};
